<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="font-bold">订单信息列表</div>
            </template>
            <el-form :model="queryFormData" :inline="true">
                <el-form-item label="时间">
                    <el-date-picker v-model="queryFormData.submit_time" type="daterange" range-separator="到"
                        start-placeholder="开始日期" end-placeholder="结束日期" :teleported="false" />
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select placeholder="请选择" v-model="queryFormData.order_status">
                        <el-option label="未付款" v-for="item in [{ value: '未付款', label: '未付款' }]" :key="item.value"
                            :label="item.label" :value="item.value" :disabled="item.disabled" />
                        <el-option label="已付款" v-for="item in [{ value: '已付款', label: '已付款' }]" :key="item.value"
                            :label="item.label" :value="item.value" :disabled="item.disabled" />
                        <el-option label="已发货" v-for="item in [{ value: '已发货', label: '已发货' }]" :key="item.value"
                            :label="item.label" :value="item.value" :disabled="item.disabled" />
                    </el-select>
                </el-form-item>
                <el-form-item label="用户ID">
                    <el-input placeholder="用户ID" v-model="queryFormData.uid"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData" :loading="isLoading" :loading-icon="Eleme">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
            <div v-loading="isLoading">
                <el-table :data="resultData.listData" border stripe max-height="550">
                    <el-table-column type="expand" align="center" width="60">
                        <template #default="{ row }">
                            <el-descriptions class="ml-[20px] mt-[10px] " :column="3" border size="small">
                                <template #title><span
                                        class="text-primaryColor font-bold text-[16px]">客户信息</span></template>
                                <el-descriptions-item label="用户名称">
                                    {{ row.userInfo.nickName }}
                                </el-descriptions-item>
                                <el-descriptions-item label="性别">
                                    {{ row.userInfo.user_sex }}
                                </el-descriptions-item>
                                <el-descriptions-item label="手机号">
                                    {{ row.userInfo.user_phone }}
                                </el-descriptions-item>
                                <el-descriptions-item label="邮箱">
                                    {{ row.userInfo.user_email }}
                                </el-descriptions-item>
                                <el-descriptions-item label="本次收货地址">
                                    {{ row.addressInfo.address }}
                                </el-descriptions-item>
                            </el-descriptions>
                            <el-descriptions title="订单详细信息" :column="3" border class="mt-[20px] ml-[20px] mb-[20px]"
                                size="small">
                                <template #title><span
                                        class="text-primaryColor font-bold text-[16px]">订单详细信息</span></template>
                                <template v-for="item in row.orderDetailList" :key="item">
                                    <el-descriptions-item label="菜品名称">
                                        {{ item.foodInfo.food_name }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="单价">
                                        {{ item.foodInfo.price }}
                                    </el-descriptions-item>
                                    <el-descriptions-item label="数量">
                                        {{ item.count }}
                                    </el-descriptions-item>
                                </template>
                            </el-descriptions>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="70" label="ID" prop="id"></el-table-column>
                    <el-table-column align="center" width="90" label="用户编号" prop="userInfo.id"></el-table-column>
                    <el-table-column align="center" width="90" label="用户昵称" prop="addressInfo.person_name">
                    </el-table-column>
                    <el-table-column width="200" label="订单生成时间">
                        <template #default="{ row }">
                            {{ formatDateTime(row.submit_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column width="100" align="center" label="订单总金额" prop="order_money"></el-table-column>
                    <el-table-column align="center" width="100" label="菜品总数" prop="orderDetailList.length">
                    </el-table-column>
                    <el-table-column align="center" width="110" label="订单状态" prop="order_status"></el-table-column>
                    <el-table-column width="180" label="付款时间">
                        <template #default="{ row }">
                            {{ formatDateTime(row.pay_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column width="180" label="发货时间">
                        <template #default="{ row }">
                            {{ formatDateTime(row.deliver_time) }}
                        </template>
                    </el-table-column>
                    <el-table-column width="300" label="收货地址" prop="addressInfo.address"></el-table-column>
                    <el-table-column width="160" fixed="right" align="center" label="操作">
                        <template #default="{ row }">
                            <el-button type="primary"
                                v-if="row.order_status == '未付款' || row.order_status == '已发货' ? isDisabled = true : isDisabled = false"
                                :disabled="isDisabled" @click="deliver(row)" size="small">
                                <el-icon>
                                    <Van />
                                </el-icon>
                                发货
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 页码 -->
                <div class="flex flex-row justify-between items-center mt-[10px]">
                    <div class="text-[14px]">当前第{{ queryFormData.pageIndex }}页，共{{ resultData.pageCount }}页，共{{
                            resultData.totalCount
                    }}条</div>
                    <el-pagination background layout="prev, pager, next" :total="resultData.totalCount"
                        @current-change="currentChange" />
                </div>
            </div>
        </el-card>
    </page-view>
</template>

<script setup>
import { formatDateTime } from "../../utils/DataTimeUtils"
import { Search, Eleme, Van } from "@element-plus/icons-vue"
import { ref, reactive, onMounted } from "vue"
import API from "../../utils/API";
import { ElMessage } from 'element-plus'


const queryFormData = reactive({
    uid: "",
    pageIndex: 1,
    submit_time: "",
    deliver_time: "",
    order_status: ""
})

const resultData = reactive({
    listData: [],
    pageCount: 0,
    pageStart: 0,
    totalCount: 0,
})

const isLoading = ref(false);


const queryData = () => {
    isLoading.value = true;
    API.orderInfo.getListByPage(queryFormData)
        .then(result => {
            // console.log(result);
            resultData.listData = result.listData;
            resultData.pageCount = result.pageCount;
            resultData.pageStart = result.pageStart;
            resultData.totalCount = result.totalCount;
        }).finally(() => {
            isLoading.value = false;
        })

}

const currentChange = (index) => {
    queryFormData.pageIndex = index;
    queryData();
}

const isDisabled = ref(false);
const deliver = (row) => {
    // console.log(row);
    API.orderInfo.updateOrderToDeliver({ id: row.id })
        .then(() => {
            if (order_status === "已付款") {
                ElMessage.success('操作成功')
                isDisabled.value = true;
            }
        }).catch(() => {
            ElMessage.warning('操作失败')
        })
        .finally(() => {
            if (row.order_status === "已发货" || row.order_status === "未付款") {
                isDisabled.value = true;
            }
        })
}


onMounted(() => {
    queryData();
})

</script>


<style scoped lang="scss">

</style>